<template>
  <view class="_page _p10">
    <el-card>
      <el-form ref="form" v-if="formData" :model="formData" label-width="120px">
        <el-form-item label="站点信息" :required="true" prop="site_mn">
          <com-select
            v-model="formData.site_mn"
            :dictList="dictSite.filter((item) => !item.erpId)"
            memo="请选择站点信息"
          />
          <text class="_font-hint"
            >注意：该可选项仅包含未绑定企业信息的站点</text
          >
        </el-form-item>
        <el-form-item label="企业信息" :required="true" prop="erp_id">
          <com-select
            v-model="formData.erp_id"
            :dictList="dictCompany"
            memo="请选择企业信息"
          />
          <view @click="drawer = true">
            <text class="_font-hint"
              >注意：新添加的企业信息需要手动刷新页面</text
            >
            <text class="_font-hint" style="margin-left: 20px">
              没有所在企业，点击<text
                style="font-size: 14px; font-weight: bold; color: #409eff"
                >这里</text
              >创建企业信息
            </text>
          </view>
        </el-form-item>
      </el-form>
      <view class="_flex _flex-end">
        <el-button type="primary" @click="submit">提交</el-button>
      </view>
    </el-card>

    <el-card>
      <view>当前企业站点绑定关系记录表 </view>
      <view class="_font-hint">
        <view>注意：</view>
        <view
          >1.该页面不提供修改功能，如果有配置错误站点请联系管理员
          18837132130(刘文举)</view
        >
        <view
          >2.基站名称请参照规范[基站名称][基站名称-出站口][基站名称-入站口]根据情况进行填写</view
        >
      </view>

      <el-table
        :data="dictSite"
        border
        style="width: 95%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="站点名称" />
        <el-table-column prop="erpId" label="企业信息">
          <template #default="scope">
            {{ transformDict(scope.row.erpId) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer
      v-model="drawer"
      title="企业信息录入"
      :with-header="false"
      size="80%"
    >
      <com-update
        dataCode="site_erp"
        dsId="cc3ac1352b104abfb86da5c351f8f68c"
      ></com-update>
    </el-drawer>
  </view>
</template>

<script>
import ComSelect from "@/components/com-select/com-select.vue";
import ToolHttp from "@/tool/http/tool-axios.js";
import ComUpdate from "@/views/common/components/update/data-form.vue";

export default {
  components: {
    ComUpdate,
    ComSelect,
  },
  data() {
    return {
      formData: {},
      dictCompany: [],
      dictSite: [],
      drawer: false,
    };
  },
  mounted() {
    ToolHttp.get("/open-api/v1/company/company").then((res) => {
      this.dictCompany = res.map((item) => ({
        name: item.erpName,
        val: item.id + "",
      }));
    });
    ToolHttp.get("/open-api/v1/site-common/list").then((res) => {
      this.dictSite = res.map((item) => ({
        name: `${item.siteName}(${item.mn})`,
        val: item.mn,
        erpId: item.erpId,
      }));
    });
  },
  methods: {
    transformDict(erpId) {
      if (!erpId) {
        return "未绑定";
      }
      let erp = this.dictCompany.find((item) => item.val == erpId);
      if (!erp) {
        return "未绑定";
      }
      return erp.name;
    },
    tableRowClassName({ row }) {
      if (row.erpId) {
        return "success-row";
      }
      return "warning-row";
    },
    submit() {
      ToolHttp.post(
        "http://121.40.237.31:38121/open-api/v1/site-common/update",
        this.formData
      ).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
::v-deep .el-table .warning-row {
  color: red;
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

::v-deep .el-table .success-row {
  color: green;
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
